<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Web UI Kit &amp; Dashboard Template based on Bootstrap">
    <meta name="author" content="AdminKit">
    <meta name="keywords" content="adminkit, bootstrap, web ui kit, dashboard template, admin template">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/icons/icon-48x48.png"/>
    <title>评价管理</title>
    <link href="${pageContext.request.contextPath}/css/app.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/js/app.js"></script>
</head>
<body>
<div class="wrapper">
    <%@include file="../icn/sidebar.jsp" %>
    <div class="main">
        <%@include file="../icn/head.jsp" %>
        <main class="content">
            <div class="container-fluid p-0">
                <div class="row">
                    <div class="col-12 col-lg-12 col-xxl-12 d-flex">
                        <div class="card flex-fill">
                            <div class="card-header">

                                <h1 class="card-title mb-0" style="font-weight: bold;font-size: 25px">用户评价列表</h1>
                            </div>
                            <br>
                            <br>
                            <br>
                            <div class="row" style="margin-left: 10px">
                                <button class="btn btn-success " style="width: 80px;height: 40px">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-edit align-middle mr-2">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                    </svg>
                                    <a href="evaluationEdit" style="color: white;text-decoration: none">新增</a></button>
                              <%-- <form action="${pageContext.request.contextPath}/system/evaluation/evaluationList" method="get">
                                   <div class="col-lg-3">
                                       <div class="input-group">
                                           <input type="text" name="userReport.item.name" class="form-control" placeholder="请输入事项名" style="width: 800px;height: 40px">
                                           <span class="input-group-btn">
                                     <button class="btn btn-success" type="submit" style="height: 40px">查询</button>
                                     </span>
                                       </div><!-- /input-group -->
                                   </div><!-- /.col-lg-6 -->
                               </form>--%>
                            </div>
                            <table class="table table-hover my-0" style="text-align: center">
                                <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th class="d-none d-xl-table-cell">用户申请事项</th>
                                    <th class="d-none d-xl-table-cell">评分</th>
                                    <th class="d-none d-xl-table-cell">内容</th>
                                    <th class="d-none d-xl-table-cell">创建时间</th>
                                    <th class="d-none d-xl-table-cell">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${evaluationPage.list}" var="e">
                                    <tr>
                                        <td class="d-none d-xl-table-cell">${e.user.name}</td>
                                        <td class="d-none d-xl-table-cell">${e.userReport.item.name}</td>
                                        <td class="d-none d-xl-table-cell">${e.score}</td>
                                        <td class="d-none d-xl-table-cell">${e.content}</td>
                                        <td><fmt:formatDate value="${e.createTime}" pattern="yyyy-MM-dd"/></td>
                                        <td>
                                            <a href="${pageContext.request.contextPath}/system/evaluation/evaluationItem/${e.id}">
                                                <button class="btn btn-info"><i class="fas fa-info"></i></button>
                                            </a>
                                            <a href="${pageContext.request.contextPath}/system/evaluation/evaluationEdit/${e.id}">
                                                <button class="btn btn-primary" style="width: 35px">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                         viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                         class="feather feather-edit-2 align-middle mr-2">
                                                        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                                    </svg>
                                                </button>
                                            </a>
                                            <a href="${pageContext.request.contextPath}/system/evaluation/evaluationList/${e.id}">
                                                <button class="btn btn-danger"><i class="fas fa-times"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <ul class="pagination pg-primary" style="margin-left: 10px">
                                <c:if test="${evaluationPage.page!=1}">
                                <li class="page-item">
                                    <a class="page-link" href="?page=${evaluationPage.page-1}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                </c:if>

                                <c:forEach begin="1" end="${evaluationPage.pageSize}" var="i">
                                <li class="page-item ${evaluationPage.page==i?'active':''}">
                                    <a class="page-link" href="?page=${i}">${i}</a></li>
                                </c:forEach>

                                <c:if test="${evaluationPage.page!=evaluationPage.pageSize}">
                                <li class="page-item">
                                    <a class="page-link" href="?page=${evaluationPage.page+1}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                                </c:if>
                                <span style="    position: relative;
    top: 2px;
    left: 20px;
    font-size: 17px">
                                        共：${evaluationPage.count}条
                                    </span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
<%--        <footer class="footer">--%>
<%--            <div class="container-fluid">--%>
<%--                <div class="row text-muted">--%>
<%--                    <div class="col-6 text-left">--%>
<%--                        <p class="mb-0">--%>
<%--                            <a href="index.jsp" class="text-muted"><strong>AdminKit Demo</strong></a> &copy;--%>
<%--                        </p>--%>
<%--                    </div>--%>
<%--                    <div class="col-6 text-right">--%>
<%--                        <ul class="list-inline">--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Support</a>--%>
<%--                            </li>--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Help Center</a>--%>
<%--                            </li>--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Privacy</a>--%>
<%--                            </li>--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Terms</a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </footer>--%>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/vendor.js"></script>
<script src="${pageContext.request.contextPath}/js/app.js"></script>
<script>
    $(function () {
        var ctx = document.getElementById('chartjs-dashboard-line').getContext("2d");
        var gradient = ctx.createLinearGradient(0, 0, 0, 225);
        gradient.addColorStop(0, 'rgba(215, 227, 244, 1)');
        gradient.addColorStop(1, 'rgba(215, 227, 244, 0)');
        // Line chart
        new Chart(document.getElementById("chartjs-dashboard-line"), {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Sales ($)",
                    fill: true,
                    backgroundColor: gradient,
                    borderColor: window.theme.primary,
                    data: [
                        2115,
                        1562,
                        1584,
                        1892,
                        1587,
                        1923,
                        2566,
                        2448,
                        2805,
                        3438,
                        2917,
                        3327
                    ]
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    intersect: false
                },
                hover: {
                    intersect: true
                },
                plugins: {
                    filler: {
                        propagate: false
                    }
                },
                scales: {
                    xAxes: [{
                        reverse: true,
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            stepSize: 1000
                        },
                        display: true,
                        borderDash: [3, 3],
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }]
                }
            }
        });
    });
</script>
<script>
    $(function () {
        // Pie chart
        new Chart(document.getElementById("chartjs-dashboard-pie"), {
            type: 'pie',
            data: {
                labels: ["Chrome", "Firefox", "IE"],
                datasets: [{
                    data: [4306, 3801, 1689],
                    backgroundColor: [
                        window.theme.primary,
                        window.theme.warning,
                        window.theme.danger
                    ],
                    borderWidth: 5
                }]
            },
            options: {
                responsive: !window.MSInputMethodContext,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                cutoutPercentage: 75
            }
        });
    });
</script>
<script>
    $(function () {
        // Bar chart
        new Chart(document.getElementById("chartjs-dashboard-bar"), {
            type: 'bar',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "This year",
                    backgroundColor: window.theme.primary,
                    borderColor: window.theme.primary,
                    hoverBackgroundColor: window.theme.primary,
                    hoverBorderColor: window.theme.primary,
                    data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    barPercentage: .75,
                    categoryPercentage: .5
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: false,
                        ticks: {
                            stepSize: 20
                        }
                    }],
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            color: "transparent"
                        }
                    }]
                }
            }
        });
    });
</script>
<script>
    $(function () {
        $("#world_map").vectorMap({
            map: "world_mill",
            normalizeFunction: "polynomial",
            hoverOpacity: .7,
            hoverColor: false,
            regionStyle: {
                initial: {
                    fill: "#e3eaef"
                }
            },
            markerStyle: {
                initial: {
                    "r": 9,
                    "fill": window.theme.primary,
                    "fill-opacity": .95,
                    "stroke": "#fff",
                    "stroke-width": 7,
                    "stroke-opacity": .4
                },
                hover: {
                    "stroke": "#fff",
                    "fill-opacity": 1,
                    "stroke-width": 1.5
                }
            },
            backgroundColor: "transparent",
            zoomOnScroll: false,
            markers: [{
                latLng: [31.230391, 121.473701],
                name: "Shanghai"
            },
                {
                    latLng: [28.704060, 77.102493],
                    name: "Delhi"
                },
                {
                    latLng: [6.524379, 3.379206],
                    name: "Lagos"
                },
                {
                    latLng: [35.689487, 139.691711],
                    name: "Tokyo"
                },
                {
                    latLng: [23.129110, 113.264381],
                    name: "Guangzhou"
                },
                {
                    latLng: [40.7127837, -74.0059413],
                    name: "New York"
                },
                {
                    latLng: [34.052235, -118.243683],
                    name: "Los Angeles"
                },
                {
                    latLng: [41.878113, -87.629799],
                    name: "Chicago"
                },
                {
                    latLng: [51.507351, -0.127758],
                    name: "London"
                },
                {
                    latLng: [40.416775, -3.703790],
                    name: "Madrid"
                }
            ]
        });
        setTimeout(function () {
            $(window).trigger('resize');
        }, 250)
    });
</script>
<script>
    $(function () {
        $('#datetimepicker-dashboard').datetimepicker({
            inline: true,
            sideBySide: false,
            format: 'L'
        });
    });
</script>

</body>

</html>